<template>
  <div class="contain-body">
    <div>
      <a href="https://chenoge.github.io/2018/05/08/CSS-%E5%87%A0%E4%B8%AA%E5%A5%BD%E7%94%A8%E7%9A%84%E5%B1%9E%E6%80%A7/" target="_blank">好用的css属性</a>
    </div>
    <div>
      <a href="https://chenoge.github.io/2018/05/08/CSS-object-fit/" target="_blank">objet-fit</a>
    </div>
    <div>
      <a href="https://chenoge.github.io/2018/12/19/git%E5%88%86%E6%94%AF%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83/" target="_blank">git开发规范</a>
    </div>
    <div class="spectiveBlur">
    </div>

    <div>css属性简写测试</div>
    <div class="fontclass">font</div>
  </div>
</template>

<script>
export default {
  name: 'WorkspaceJsonCss',

  data() {
    return {
    };
  },

  mounted() {

  },

  methods: { 

  },
};
</script>

<style lang="scss" scoped>
.contain-body {
  width: 100%;
  height: 100vh;
  padding: 20px 50px;
  background: #000;
  color: #fff;
  font-size: 16px;
  a {
    line-height: 25px;
  }
}
.spectiveBlur {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 220px;
  line-height: 160px;
  transform: translate(-50%, -50%);
  border-radius: 10px;
  overflow: hidden;
  background: #e91e63;
  color: #fff;
  font-size: 200%;
  text-align: center;
  cursor: pointer;
  transition: transform 0.2s;
}

.fontclass{
   font:normal  12px/20px caption;
}
.spectiveBlur:hover {
  box-shadow: 0 0 0 1920px rgba(0, 0, 0, 0.7);
  transform: translate(-50%, -50%) scale(1.2);
}
</style>